<template>
    <div id="itemlist">
        <top wrapheight="1" titles="列表" back="1" more="0">
            <template v-slot:df="scope">
                <div>
                    <div class="topsconts">
                        <!-- 占位预留放置其他内容，建议保留 -->
                    </div>
                    <div style="position: relative;">
                        <!-- 左边部分 -->
                        <div class="leftwrap"
                            :style="{ maxHeight: winheight + 'px', position: iffixed ? 'fixed' : 'absolute', top: iffixed ? (bottonheight + 'px') : '0', overflow: !ifoverflow ? 'hidden auto' : 'hidden' }"
                            id="domleft">
                            <div :style="{ height: (winheight - (righttop)) + 'px' }">
                                <div v-for="(v, i) in 30">
                                    <div class="leftitem" :id="'T_' + i" @click="leftgetright(i)"
                                        :style="{ backgroundColor: leftid == 'T_' + i ? '#eee' : '' }">分类{{ i }}</div>
                                </div>
                            </div>
                        </div>
                        <!-- 右边部分 -->
                        <div class="rightwrap" ref="theright">
                            <div v-for="(v, i) in 30">
                                <div :id="'TI_' + i">
                                    <div class="leftitem">分类{{ i }}</div>
                                    <van-card v-for="v in 3" :num="'1 (张)'" origin-price="10.00" desc="描述信息" title="商品标题"
                                        :thumb="shopitem" @click="todetail(3)">
                                        <template v-slot:price="scope">
                                            ￥2.00-3.00
                                        </template>
                                    </van-card>
                                </div>
                            </div>
                        </div>
                        <div class="bottomwrap" ref="bottomwrap">
                            <!-- 占位获取最顶部高度容器，建议保留 -->
                        </div>
                    </div>
                </div>
            </template>
        </top>
    </div>
</template>

<script lang="ts" setup>
//import
/**/
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
/*图片资源*/
import shopitem from '../assets/20230517164305.png'
//init hook
/**/
const router = useRouter()
//getdom
/**/
const theright = ref()//获取元素
const bottomwrap = ref()//获取元素
//data
/**/
const winheight: any = ref(0);
const iffixed: any = ref(0)
const righttop: any = ref(0);
const bottonheight: any = ref(0);
const ifoverflow: any = ref(0)
/**/
const leftid = ref('')
//methods
/**/
const setdom: Function = () => {
    winheight.value = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
    resetdom()
};
const resetdom: Function = () => {
    var rt = theright.value && theright.value.getBoundingClientRect().top ? theright.value.getBoundingClientRect().top : 0,
        bh = bottomwrap.value && bottomwrap.value.getBoundingClientRect().height || 0;
    righttop.value = (rt < bh ? bh : rt) || (rt)
    bottonheight.value = bh
    if (rt <= bh) {
        iffixed.value = 1
    } else {
        iffixed.value = 0
    }
};
/**/
const rightgetleft: Function = () => {
    //假设有list(重点注意dom的获取方式)
    if (ifoverflow.value == 0) {
        for (var i = 0; i < 30; i++) {
            if (document.getElementById('TI_' + i).getBoundingClientRect().top > bottonheight.value) {
                leftid.value = 'T_' + (i - 1 < 0 ? 0 : i - 1)
                document.getElementById('T_' + (i - 1)) && document.getElementById('T_' + (i - 1)).scrollIntoView(true)
                break;
            }
        }
    }
}
const leftgetright: Function = (id) => {
    ifoverflow.value = 1
    leftid.value = 'T_' + id
    window.scrollTo(0, document.getElementById('TI_' + id).offsetTop)
    setTimeout(() => {
        ifoverflow.value = 0
    }, 100)
}
const initlist = () => {
    //调用接口获取list，然后初始化左侧id
    leftid.value = 'T_0'//初始化左侧id
}
/**/
const todetail: Function = (id: any) => {
    router.push({ path: '/detail', query: { id } })
}
//mounted
/**/
onMounted(() => {
    setdom();
    window.addEventListener('resize', () => {
        setdom()
    });
    initlist()
    window.addEventListener('scroll', () => {
        if (!document.getElementById('itemlist')) return;
        resetdom()
        rightgetleft()
    });
})
</script>







<style scoped>
.topsconts {
    min-height: 80px;
    height: 80px;
    border-bottom: 1px solid #ccc;
}

.leftwrap {
    position: absolute;
    left: 0;
    top: 0;
    width: 180px;
    min-height: 100px;
    border-right: 1px solid #ccc;
    overflow: hidden auto;
}

.leftitem {
    padding: 20px;
    border-bottom: 1px solid #eee;
}

.rightwrap {
    margin-left: 180px;
    min-height: 100px;
}

.bottomwrap {
    height: 80px;
}
</style>